<template>
  <div class="banner-wrapper w-content">
    <el-carousel height="410px" :interval="interval">
      <el-carousel-item v-for="(item, index) in articleList" :key="'banner' + index">
        <div class="w-100 p-re" @click="toNewsDetail(item.id)">
          <img :src="imgUrl + item.titleImageId" class="w-100 banner-image">
          <div v-if="index === 0" class="p-ab banner-dw">主办单位： {{ copyright }}
          </div>
          <!--          <div v-if="index === 0" class="p-ab banner-tel">电话热线： 0558-2707115</div>-->
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { articleList } from '@/api/rest/portal/portal'
import { copyright } from '@/settings'

export default {
  name: 'IndexBanner',
  data() {
    return {
      interval: 5000,
      bannerList: [require('@/assets/portal_images/banner.png')],
      imgUrl: process.env.VUE_APP_BASE_API + '/api/portal/viewImage/',
      categoryCode: 'LOOP',
      listQuery: {
        categoryCodes: '',
        page: 1,
        limit: 5
      },
      articleList: [],
      copyright: copyright
    }
  },
  created() {
    this.getArticleList(this.categoryCode)
  },
  methods: {
    toNewsDetail(id) {
      this.$router.push({ path: '/newsDetail', query: { id, currentIndex: this.categoryIndex, categoryTitle: '新闻资讯' }})
    },
    getArticleList(categoryCode) {
      this.listQuery.page = 1
      this.listQuery.categoryCodes = categoryCode
      articleList(this.listQuery).then(res => {
        this.articleList = res.data.items
        this.total = res.data.total
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.banner-wrapper {
  height: 410px;

  .banner-image {
    height: 410px;
    cursor: pointer;
  }

  .banner-dw {
    left: 125px;
    top: 290px;
    color: #ffffff;
    font-size: 24px;
  }

  .banner-tel {
    left: 125px;
    top: 340px;
    color: #ffffff;
    font-size: 24px;
  }
}
</style>
